
var model = "<div class='img-content'>" +
    "<div class='previous'><button class='left-btn' id='left_btn'>left</button></div>" +
    "<div class='next'><button class='right-btn' id='right_btn'>right</button></div>" +
    "<ul class='img-list' id='img_List'>" +
    // "<li class='item'><img src='static/img/imooc.png' alt=''></li>" +
    "</ul>" +
    "</div>" +
    "<div class='nav-dot'>" +
    "<span class='dot'>1</span>" +
    "<span class='dot'>2</span>" +
    "<span class='dot'>3</span>" +
    "</div>"

var imgItemPrefix = "<li class='item'><img src='"
var imgItemSuffix = "' alt=''></li>"
var index = 0
var imgList;
var imageSize = 0;

function iSlider(id, imgArray) {

    $('#iSlider').html(model)

    imgArray.forEach(element => {
        console.log('element: ' + element)
        $('.iSlider .img-content .img-list').append(imgItemPrefix + element + imgItemSuffix)
    });
    imageSize = imgArray.length

    // startTimer(autoPlay,3000,imgList.length)
    // imgList.animate({ 'transfrom': 'translateX(-100%)' })
}

function autoPlay(imgSize) {
    if (index > imgSize) {
        index = 0
    }
    var position = - (index * 100)
    var translateStr = 'translateX(' + position + '%)';
    imgList.css('transfrom', translateStr)
    console.log('position: ' + position + ' imgSize: ' + imgSize + ' translateStr: ' + translateStr)
    index++
}

function startTimer(methodName, period, imgSize) {
    setInterval(methodName, period, imgSize)
}

function moveImage(direction) {
    var offset;

    console.log('index: '+index)
    if (index > imageSize) {
        index = 0
    } else if (index <= 0) {
        index = imageSize - 1
    }
    if (direction === 'pre') {
        if(index==0){
            index=imageSize-1;
        }

        offset = -(index * 100) + "%";
        $('.iSlider .img-content .img-list').css('background-color','blue')
        index--;
    } else if (direction === 'next') {
        if(index===(imageSize-1)){
            index=0
        }
        offset = (index * 100) + "%";
        index++;
    }
    var translateStr='translateX(' + offset + ')'
    $('.iSlider .img-content .img-list').css({transform:translateStr})
    console.log(translateStr)


}

function move(x, y) {
    console.log('x: ' + x)
    $('#img_list').css({ transform: 'translateX(' + x + '%)' })
}

$('#iSlider').on('click', '.img-content .previous .left-btn', function () {
    moveImage('pre')
})
$('#iSlider').on('click', '.img-content .next .right-btn', function () {
    moveImage('next')
})